<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            box-sizing: border-box;
        }

        .vc-switch2-wrapper {
            --outer-gap: 4px;
            --wrapper-width: 300px;
            --wrapper-height: 40px;
            --switch-height: calc(var(--wrapper-height) - var(--outer-gap) * 2);
            display: flex;
            align-items: center;
            width: var(--wrapper-width);
            height: var(--wrapper-height);
            border: 1px solid;
            padding: var(--outer-gap);
            font-size: 14px;
            position: relative;
        }

        .vc-switch2-wrapper .vc-switch {
            height: var(--switch-height);
            padding: 0 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }

        .vc-switch2-wrapper .vc-switch-text {
            position: relative;
        }

        .vc-switch2-wrapper .vc-switch-slider {
            position: absolute;
            top: var(--outer-gap);
            left: 0;
            display: block;
            width: 0px;
            height: var(--switch-height);
            z-index: 0;
            background-color: red;
            transition: width .2s linear, left .2s ease-in-out;
        }
    </style>
    <div class="vc-switch2-wrapper">
        <div class="vc-switch active">
            <div class="vc-switch-text">法米娜</div>
        </div>
        <div class="vc-switch">
            <div class="vc-switch-text">牧野奇迹</div>
        </div>
        <div class="vc-switch">
            <div class="vc-switch-text">皇家</div>
        </div>

        <div class="vc-switch-slider"></div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const switchWrapper = document.querySelector('.vc-switch2-wrapper');
            const switches = document.querySelectorAll('.vc-switch2-wrapper .vc-switch');
            const switchCount = switches.length
            const slider = document.querySelector('.vc-switch2-wrapper .vc-switch-slider');
            const getRect = (index) => {
                const el = switches[index]
                const rect = el.getBoundingClientRect();
                return {
                    left: el.offsetLeft,
                    width: rect.width
                }
            }
            const calcSliderPosition = (index) => {
                const rect = getRect(index)
                const width = rect.width + 'px'
                slider.style.width = width;
                const left = rect.left + 'px'
                setTimeout(() => {
                    slider.style.left = left;
                }, 0)
            }

            calcSliderPosition(0);

            switches.forEach((el, index) => {
                el.addEventListener('click', () => {
                    calcSliderPosition(index);
                })
            })
        })
    </script>
</body>

</html>